<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta charset="UTF-8">
	<title>-webkit-align-self demo</title>
	
	

<link rel="stylesheet" type="text/css" href="align-self_1.css" media="all">
</head>
<body>

	<h1>-webkit-align-self:</h1>
	<dl id="control_panel" class="control_panel">
		<label><input name="align" value="flex-start" type="radio">flex-start</label>
		<label><input name="align" value="flex-end" type="radio">flex-end</label>
		<label><input name="align" value="center" type="radio">center</label>
		<label><input name="align" value="baseline" type="radio">baseline</label>
		<label><input name="align" value="stretch" type="radio">stretch</label>
	</dl>

	<div class="wrap">
		<h2>-webkit-align-self:</h2>
		<div class="test">
			<div class="red testa"><p>1</p><p>10</p></div>
			<div class="green testa"><p>2</p><p>20</p><p>200</p></div>
			<div class="black testa"><p>3</p><p>30</p><p>300</p><p>30</p><p>300</p></div>
			<div class="blue testa"><p>4</p><p>400</p></div>
		</div>
	</div>

	<script type="text/javascript">
		var radio = document.querySelectorAll(".control_panel label input");
		var test = document.querySelectorAll(".testa");
		for(var i=0;i<radio.length;i++) {
			radio[i].onclick = (function(index) {
				return function(){
					if(radio[index].checked){
						for(var j=0;j<test.length;j++) {
							test[j].style.cssText = "-webkit-align-self:"+radio[index].value+";";
						}
					}
				}
			})(i);
		}
	</script>

</body>
</html>
